﻿<section class="section" id="list-items">
    <header class="section-header row">
        <h1 class="section-title col-xs-24">
            <a href="#list-items">List items</a>
        </h1>
    </header>

    <div class="row">
        <div class="col-xs-24">
            <p>
                Instead of using a table this component uses a list, the grid and columns to layout its items.
                Click on a row to expand or collapse the details.
            </p>

            <ol class="list-items">
                <li class="list-items-row">
                    <div data-toggle="collapse" aria-expanded="false" data-target="#list-item-line-1">
                        <div class="row">
                            <div class="col-md-2">
                                <i class="glyph glyph-add"></i>
                                <i class="glyph glyph-remove"></i>
                                <strong>1</strong>
                            </div>
                            <div class="col-md-6">
                                <a>Link</a>
                            </div>
                            <div class="col-md-4">
                                Text
                            </div>
                            <div class="col-md-4">
                                Text
                            </div>
                            <div class="col-md-4">
                                Text
                            </div>
                            <div class="col-md-4 text-right">
                                <a>Link</a>
                            </div>
                        </div>
                    </div>

                    <div class="collapse" id="list-item-line-1">
                        <div class="row">
                            <div class="col-md-18 col-md-offset-2">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                            </div>
                            <div class="col-md-4 text-right">
                                <button class="btn btn-primary btn-sm">Button</button>
                            </div>
                        </div>
                    </div>
                </li>

                <li class="list-items-row">
                    <div data-toggle="collapse" aria-expanded="false" data-target="#list-item-line-2">
                        <div class="row">
                            <div class="col-md-2">
                                <i class="glyph glyph-add"></i>
                                <i class="glyph glyph-remove"></i>
                                <strong>2</strong>
                            </div>
                            <div class="col-md-6">
                                <a>Link</a>
                            </div>
                            <div class="col-md-4">
                                Text
                            </div>
                            <div class="col-md-4">
                                Text
                            </div>
                            <div class="col-md-4">
                                Text
                            </div>
                            <div class="col-md-4 text-right">
                                <a>Link</a>
                            </div>
                        </div>
                    </div>

                    <div class="collapse" id="list-item-line-2">
                        <div class="row">
                            <div class="col-md-18 col-md-offset-2">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                            </div>
                            <div class="col-md-4 text-right">
                                <button class="btn btn-primary btn-sm">Button</button>
                            </div>
                        </div>
                    </div>
                </li>

                <li class="list-items-row">
                    <div data-toggle="collapse" aria-expanded="false" data-target="#list-item-line-3">
                        <div class="row">
                            <div class="col-md-2">
                                <i class="glyph glyph-add"></i>
                                <i class="glyph glyph-remove"></i>
                                <strong>3</strong>
                            </div>
                            <div class="col-md-6">
                                <a>Link</a>
                            </div>
                            <div class="col-md-4">
                                Text
                            </div>
                            <div class="col-md-4">
                                Text
                            </div>
                            <div class="col-md-4">
                                Text
                            </div>
                            <div class="col-md-4 text-right">
                                <a>Link</a>
                            </div>
                        </div>
                    </div>

                    <div class="collapse" id="list-item-line-3">
                        <div class="row">
                            <div class="col-md-18 col-md-offset-2">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                            </div>
                            <div class="col-md-4 text-right">
                                <button class="btn btn-primary btn-sm">Button</button>
                            </div>
                        </div>
                    </div>
                </li>
            </ol>

            {{#markdown}}
```xml
<ol class="list-items">
    <li class="list-items-row">
        <div data-toggle="collapse" aria-expanded="false" data-target="#list-item-line-1">
            <div class="row">
                <div class="col-md-2">
                    <i class="glyph glyph-add"></i>
                    <i class="glyph glyph-remove"></i>
                    <strong>1</strong>
                </div>
                <div class="col-md-6">
                    <a>Link</a>
                </div>
                <div class="col-md-4">
                    Text
                </div>
                <div class="col-md-4">
                    Text
                </div>
                <div class="col-md-4">
                    Text
                </div>
                <div class="col-md-4 text-right">
                    <a>Link</a>
                </div>
            </div>
        </div>

        <div class="collapse" id="list-item-line-1">
            <div class="row">
                <div class="col-md-18 col-md-offset-2">
                    Lorem ipsum dolor sit amet.
                </div>
                <div class="col-md-4 text-right">
                    <button class="btn btn-primary btn-sm">Button</button>
                </div>
            </div>
        </div>
    </li>
</ol>
```
            {{/markdown}}
        </div>
    </div>
</section>
